<template>
  <div id="app">
    <h2>我是app组件{{message}}====下面是app内容</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <br>
    ==============分割线==============


    <h2>app内容，演示getters的相关信息</h2>
    <h2>获取counter的平方：{{$store.getters.powerCounter}}</h2>
    <ul >
        <li v-for="item in $store.getters.getSomeStudent">{{item}}</li>
    </ul>
    <h3>大于18岁的学生的个数：：{{$store.getters.getSomeStudent.length}}</h3>

    <h4>返回函数的计算属性::{{$store.getters.getStudentsByAge(18)}}</h4>

    <br>
    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
    import HelloVuex from './components/HelloVuex'

    export default {
        name: 'App',
        components: {
            HelloVuex
        },
        data() {
            return {
                message: "我是你爹"
            }
        },
        methods: {
            addition() {
                this.$store.commit('increment');
            },
            subtraction() {
                //mutations的普通提交方式
                this.$store.commit('decrement')

                //特殊的提交方式
                this.$store.commit({
                    type: 'decrement',
                    count,
                    age: 18
                })
            }
        },
        computed: {
            getSomeStudent() {
                //filter返回Boolean值，若为false，将这个参数过滤掉
                return this.$store.state.students.filter(s => {
                    return s.age > 18
                })
            }
        },
    }
</script>

<style>

</style>